<template lang="pug">
.page-head(:class="props.bordered ? 'bordered' : ''")
  .left
    n-icon.back(v-if="isBack" size="24" :component="ArrowLeft16Filled" @click="emit('back')")
    .title(v-if="props.title || props.subTitle")
      n-h4(v-if="props.title") {{ title }}
      span.subtitle(v-if="props.subTitle") {{ subTitle }}
    slot(name="append")
  .right
    n-space
      slot

</template>

<script setup>
import {ArrowLeft16Filled} from "@vicons/fluent"

const emit = defineEmits(["back"])

const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  subTitle: {
    type: String,
    default: ""
  },
  isBack: {
    type: Boolean,
    default: false
  },
  bordered: {
    type: Boolean,
    default: true
  }
})

</script>

<style lang="scss" scoped>

.bordered {
  border-bottom: 1px solid var(--n-border-color);
}

.page-head {
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: 5px;
  z-index: 11;

  .left {
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    gap: 10px;

    .back {
      cursor: pointer;
    }

    .title {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      white-space: nowrap;
      gap: 10px;

      :deep(.n-h4) {
        margin: 0;
      }

      .subtitle {
        font-size: 14px;
        color: #999;
        white-space: nowrap;
      }
    }
  }

  .right {
    :deep(.n-space) {
      align-items: center;
    }
  }
}

</style>